import $ from 'jquery'
import * as echarts from 'echarts'
export default {
    install(Vue, options) {
        // 基础折线图 
        Vue.prototype.$echartsLine = function ({
            ele,
            legendData = ["请休假趋势"],
            xAxisData = ["2013-10", "2013-11", "2014-01", "2014-02", "2014-03"],
            seriesData = [210, 145, 200, 110, 340, 40],
        } = {}) {

            let fz = ($("body").width() / 1920);
            $(window).resize(function () {
                fz = ($("body").width() / 1920);
                console.log(fz);
            });
            var myChart = new echarts.init(document.getElementById(ele));
            let option = {
                tooltip: {
                    trigger: 'axis',
                    backgroundColor: 'rgba(0,0,0,0.3)', borderColor: 'rgba(255,255,255,0.3)',
                    textStyle: {
                        color: '#fff',
                        fontSize: fz * 12
                    },
                    axisPointer: {
                        lineStyle: {
                            color: 'rgba(255,255,255,0.5)',
                        },
                    }
                },
                grid: {
                    top: '10%',
                    left: '10%',
                    right: '5%',
                    bottom: '15%',
                },
                xAxis: {
                    boundaryGap: true,
                    data: xAxisData,
                    axisLine: {
                        lineStyle: {
                            color: "rgba(255, 255, 255, 0.4)"
                        }
                    },
                    axisTick: {
                        show: false
                    },
                    axisLabel: {
                        color: 'rgba(255, 255, 255, 1)',
                        textStyle: {
                            fontSize: 12 * fz
                        }

                    },
                    splitLine: {
                        show: true,
                        lineStyle: {
                            color: 'rgba(255, 255, 255, 0.2)',
                            type: 'dashed'
                        }
                    },
                },
                yAxis: [{
                    name: '',
                    type: "value",
                    splitLine: {
                        show: true,
                        lineStyle: {
                            color: 'rgba(255, 255, 255, 0.2)',
                            type: 'dashed'
                        }
                    },
                    axisLine: {
                        show: false,
                        lineStyle: {
                            color: "#0A5C95"
                        }
                    },
                    axisLabel: {
                        color: 'rgba(255, 255, 255, 1)',
                        textStyle: {
                            fontSize: 12 * fz
                        }
                    },
                    nameTextStyle: {
                        color: '#89BFE5',
                        padding: [0, 0, 0, 15 * fz],
                        fontSize: 12 * fz
                    },
                    axisTick: {
                        show: false
                    }
                }],
                aria: {
                    enabled: true,
                    decal: {
                        show: true,
                        decals: [
                            {
                                show: false,
                                dashArrayX: [0, 0],
                                backgroundColor: "rgba(255,255,255,0)",
                                dashArrayY: [0, 0],
                            },
                        ]
                    }
                },
                series: [
                    {
                        name: legendData[0],
                        type: "line",
                        symbol: 'circle', //设定为实心点
                        showAllSymbol: false,
                        symbolSize: 0,
                        smooth: false,
                        itemStyle: {
                            normal: {
                                color: `#00CBFE`,
                                lineStyle: { //线的颜色
                                    color: `rgba(105, 212, 240, .6)`,
                                    width: 1.5 * fz
                                },
                                areaStyle: {
                                    type: 'default',
                                    //渐变色实现
                                    color: new echarts.graphic.LinearGradient(0, 0, 0, 1, //变化度
                                        //三种由深及浅的颜色
                                        [{
                                            offset: 0,
                                            color: 'rgba(105, 212, 240, .6)'
                                        }, {
                                            offset: 1,
                                            color: 'rgba(1, 180, 255, 0)'
                                        }])
                                },
                            }
                        },
                        data: seriesData
                    },

                ]
            };

            myChart.setOption(option);

        }
        // 基础柱状图
        Vue.prototype.$echarts_zhu = function ({
            ele,
        } = {}) {

            let fz = ($("body").width() / 1920);
            $(window).resize(function () {
                fz = ($("body").width() / 1920);
            });
            var myChart = new echarts.init(document.getElementById(ele));
            let option = {
                backgroundColor: '',
                grid: {
                    top: '20%',
                    left: '2%',
                    right: '2%',
                    bottom: '8%',
                    containLabel: true,
                },

                tooltip: {
                    trigger: "axis",
                    backgroundColor: "rgba(1, 13, 19, 0.5)",
                    borderWidth: 1,
                    formatter: (params) => {
                        return params[0].name + " : " + params[0].value;
                    },

                    textStyle: {
                        color: "rgba(255, 255, 254, 1)",
                    },
                    extraCssText: "z-index:2"
                },
                xAxis: {
                    data: ['调休', '事假', '病假', '外勤', '产假', '育儿假'],
                    axisLine: {
                        show: true,
                        lineStyle: {
                            color: 'rgba(255,255,255,1)',
                        }
                    },
                    axisTick: {
                        show: false
                    },
                    axisLabel: {
                        color: 'rgba(255,255,255,1)',
                        fontSize: 12,
                    },
                },
                yAxis: [{
                    type: 'value',
                    name: "",
                    nameTextStyle: {
                        color: "#fff",
                        fontFamily: "Alibaba PuHuiTi",
                        fontSize: 14,
                        padding: [0, 0, 0, 30]
                    },

                    axisLine: {
                        show: true,
                        lineStyle: {
                            color: 'rgba(255,255,255,0.5)',
                        }
                    },
                    axisTick: {
                        show: false
                    },
                    axisLabel: {
                        color: 'rgba(255,255,255,1)',
                        fontSize: 14
                    },
                    splitLine: {
                        show: true,
                        lineStyle: {
                            color: 'rgba(255,255,255,0.5)',
                        }
                    },
                }],
                series: [
                    {
                        type: 'bar',
                        barWidth: 8,
                        zlevel: 2,
                        itemStyle: {
                            normal: {
                                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                                    offset: 0,
                                    color: '#C6D5DE'
                                }, {
                                    offset: 1,
                                    color: '#C6D5DE'
                                }], false)
                            }
                        },
                        label: {
                            normal: {
                                show: false,
                                fontSize: 13,
                                color: '#14B6F3',
                                position: 'top',
                            }
                        },
                        data: [82, 50, 90, 18, 8, 2]
                    }]
            }

            myChart.setOption(option);

        }
        // 基础饼图
        Vue.prototype.$echartsLine_pie = function ({
            ele,
            bgColor = '#fff',
            title = '',
            color = ['#0E7CE2', '#FF8352', '#E271DE', '#F8456B', '#00FFFF', '#4AEAB0'],
            echartData = [{
                name: "调休",
                value: "82"
            },
            {
                name: "事假",
                value: "50"
            },
            {
                name: "病假",
                value: "90"
            },
            {
                name: "外勤",
                value: "18"
            }
                ,
            {
                name: "产假",
                value: "8"
            },
            {
                name: "育儿假",
                value: "2"
            }
            ],

            formatNumber = function (num) {
                let reg = /(?=(\B)(\d{3})+$)/g;
                return num.toString().replace(reg, ',');
            },
            total = echartData.reduce((a, b) => {
                return a + b.value * 1
            }, 0)
        } = {}) {

            let fz = ($("body").width() / 1920);
            $(window).resize(function () {
                fz = ($("body").width() / 1920);
            });
            var myChart = new echarts.init(document.getElementById(ele));
            let option = {
                backgroundColor: "",
                color: color,
                series: [{
                    type: 'pie',
                    radius: ['45%', '60%'],
                    center: ['50%', '50%'],
                    data: echartData,
                    hoverAnimation: false,
                    itemStyle: {
                        normal: {
                            borderColor: bgColor,
                            borderWidth: 2
                        }
                    },
                    labelLine: {
                        normal: {
                            length: 20,
                            length2: 120,
                            lineStyle: {
                                color: '#e6e6e6'
                            }
                        }
                    },
                    label: {
                        normal: {
                            formatter: params => {
                                return (
                                    '{icon|●}{name|' + params.name + '}{value|' +
                                    formatNumber(params.value) + '}'
                                );
                            },
                            padding: [0, -100, 25, -100],
                            rich: {
                                icon: {
                                    fontSize: 14
                                },
                                name: {
                                    fontSize: 12,
                                    padding: [0, 10, 0, 4],
                                    color: 'rgba(255,255,255,1)'
                                },
                                value: {
                                    fontSize: 14,
                                    fontWeight: 'bold',
                                    color: 'rgba(255,255,255,1)'
                                }
                            }
                        }
                    },
                }]
            };
            myChart.setOption(option);

        }
        // 左边同心圆饼图 右侧参数
        Vue.prototype.$echarts_Pie_lable = function ({

            ele, // 渲染画布的ID

            trafficWay = [],

            colorList = [],

        } = {}) {


            let fz = $("body").width() / 1920;

            $(window).resize(function () {

                fz = $("body").width() / 1920;

            });

            var myChart = new echarts.init(document.getElementById(ele));

            var img =

                "";
            var sum = trafficWay.reduce((prev, cur) => {

                return prev + cur.value * 1;

            }, 0);



            const data = [];

            const color = [

                new echarts.graphic.LinearGradient(1, 1, 0, 0, [

                    {

                        offset: 0,

                        color: colorList[0][0],

                    },

                    {

                        offset: 1,

                        color: colorList[0][1],

                    },

                ]),

                new echarts.graphic.LinearGradient(0, 0, 1, 1, [

                    {

                        offset: 0,

                        color: colorList[1][0],

                    },

                    {

                        offset: 1,

                        color: colorList[1][1],

                    },
                ]),

                new echarts.graphic.LinearGradient(1, 1, 1, 0, [

                    {

                        offset: 0,

                        color: colorList[2][0],

                    },

                    {

                        offset: 1,

                        color: colorList[2][1],

                    },

                ]),



            ];

            for (let i = 0; i < trafficWay.length; i++) {

                data.push(

                    {

                        value: trafficWay[i].value,

                        name: trafficWay[i].name,

                        itemStyle: {

                            normal: {

                                borderWidth: 15,

                                borderRadius: 400,

                            },

                        },

                    },
                    {

                        value: sum / 60,

                        name: "",

                        itemStyle: {

                            normal: {

                                label: {

                                    show: false,

                                },

                                labelLine: {

                                    show: false,

                                },

                                color: "rgba(0, 0, 0, 0)",

                                borderColor: "rgba(0, 0, 0, 0)",

                            },

                        },

                    }

                );

            }

            const seriesOption = [

                // 内圆

                {

                    type: "pie",

                    zlevel: -1, // 层级

                    radius: ["0%", "35%"],

                    center: ["50%", "50%"],
                    itemStyle: {

                        normal: {

                            shadowBlur: 10,

                            shadowColor: "rgba(255,255,255,0.25)",

                            color: "rgba(255,255,255,0.25)", borderWidth: 1,

                            borderColor: "rgba(255,255,255,0.5)",

                            label: {

                                show: false,

                            },

                            labelLine: {

                                show: false,

                            },

                        },

                    },

                    hoverAnimation: false,

                    data: [100],

                },

                {

                    name: "",

                    type: "pie",

                    clockWise: false,

                    radius: ["100%", "120%"],

                    hoverAnimation: false,

                    center: ["50%", "50%"],

                    top: "center",

                    itemStyle: {

                        normal: {

                            label: {

                                show: false,

                            },

                        },

                    },

                    data: data,

                },

                // 外环

                {

                    type: "pie",

                    radius: ["75%", "75%"],

                    center: ["50%", "50%"],

                    itemStyle: {

                        normal: {

                            shadowBlur: 10 * fz,

                            shadowColor: "rgba(0,161,163,0.25)",

                            color: "rgba(0,161,163,0.04)",

                            borderWidth: 1,

                            borderColor: "rgba(255,255,255,0.25)",

                            borderType: ["1", "0"],

                            borderLeft: 0,

                            borderRight: 0,

                            label: {


                                show: false,

                            },

                            labelLine: {

                                show: false,

                            },

                        },

                    },

                    hoverAnimation: false,

                    data: [100],

                },

            ];

            let option = {

                color: color,



                graphic: {

                    elements: [

                        {

                            type: 'image',

                            z: 3,

                            style: {

                                image: img,

                                width: 30 * fz,

                                height: 30 * fz

                            },

                            left: 'center',
                            top: 'center'

                        }

                    ]

                },

                tooltip: {

                    show: false

                },

                series: seriesOption

            }



            myChart.setOption(option);

        };
        // 横着的 左右下 都有 lable
        Vue.prototype.$echarts_LRB_lable = function ({

            ele, // 渲染画布的ID

        } = {}) {

            var tdata = [{
                name: '财辅团队',
                num: '53'
            }, {
                name: '人才云团队',
                num: '28'
            }, {
                name: 'SAP-FICO团队',
                num: '24'
            }, {
                name: '人力团队',
                num: '4'
            }, {
                name: '安全服务团队',
                num: '2'
            },]

            function contains(arr, dst) {
                var i = arr.length
                while ((i -= 1)) {
                    if (arr[i] === dst) {
                        return i
                    }
                }
                return false
            }

            var attackSourcesColor = [
                new echarts.graphic.LinearGradient(0, 1, 1, 1, [
                    { offset: 0, color: '#EB3C5A' },
                    { offset: 1, color: '#FD9A5A' }
                ]),
                new echarts.graphic.LinearGradient(0, 1, 1, 1, [
                    { offset: 0, color: '#EEC146' },
                    { offset: 1, color: '#FD9A5A' }
                ]),
                new echarts.graphic.LinearGradient(0, 1, 1, 1, [
                    { offset: 0, color: '#F7B935' },
                    { offset: 1, color: '#FEEB90' }
                ]),
                new echarts.graphic.LinearGradient(0, 1, 1, 1, [
                    { offset: 0, color: '#395CFD' },
                    { offset: 1, color: '#2EC2D1' }
                ])
            ]
            var attackSourcesColor1 = [
                '#EB3B5A',
                '#FA8231',
                '#F7B731',
                '#3860FC',
                '#1089E7',
                '#F57474',
                '#56D0E3',
                '#1089E7',
                '#F57474',
                '#1089E7',
                '#F57474',
                '#F57474'
            ]
            var attaData = []
            var attaName = []
            var topName = []
            tdata.forEach((it, index) => {
                attaData[index] = parseFloat(it.num).toFixed(2)
                attaName[index] = it.num
                topName[index] = `${it.name}`
            })
            var salvProMax = [] // 背景按最大值
            for (let i = 0; i < attaData.length; i++) {
                salvProMax.push(Math.max(...attaData))
            }
            function attackSourcesDataFmt(sData) {
                var sss = []
                sData.forEach(function (item, i) {
                    const itemStyle = {
                        color: '#00CFE5'
                        // color: i > 3 ? attackSourcesColor[3] : attackSourcesColor[i]
                    }
                    sss.push({
                        value: item,
                        itemStyle: itemStyle
                    })
                })
                return sss
            }
            let fz = $("body").width() / 1920;

            $(window).resize(function () {

                fz = $("body").width() / 1920;

            });

            var myChart = new echarts.init(document.getElementById(ele));

            let option = {
                backgroundColor: "",
                tooltip: {
                    trigger: 'axis',
                    axisPointer: { // 坐标轴指示器配置项。
                        type: 'none', // 'line' 直线指示器  'shadow' 阴影指示器  'none' 无指示器  'cross' 十字准星指示器。
                        axis: 'auto', // 指示器的坐标轴。
                        snap: true // 坐标轴指示器是否自动吸附到点上
                    },
                    renderMode: 'html', // 浮层的渲染模式，默认以 'html 即额外的 DOM 节点展示 tooltip；
                    backgroundColor: 'rgba(50,50,50,0.7)', // 提示框浮层的背景颜色。
                    borderColor: '#333', // 提示框浮层的边框颜色。
                    borderWidth: 1, // 提示框浮层的边框宽。
                    padding: 2, // 提示框浮层内边距，
                    textStyle: { // 提示框浮层的文本样式。
                        color: '#fff',
                        fontStyle: 'normal',
                        fontWeight: 'normal',
                        fontFamily: 'sans-serif',
                        fontSize: 12
                    },
                    extraCssText: 'box-shadow: 0 0 3px rgba(0, 0, 0, 0.3);' // 额外附加到浮层的 css 样式

                },
                color: ['#F7B731'],
                grid: {
                    left: '5%',
                    right: '0%',
                    width: '90%',
                    bottom: '2%',
                    top: '0%',
                    containLabel: true
                },
                xAxis: {
                    type: 'value',
                    show: true,
                    splitLine: {
                        show: false
                    },
                    axisLabel: {
                        show: true
                    },
                    axisTick: {
                        show: false
                    },
                    axisLine: {
                        show: false
                    },
                    data: topName
                },
                yAxis: [
                    {
                        // 名称
                        type: 'category',
                        offset: 80 * fz,
                        position: 'left',
                        axisLine: {
                            show: false
                        },
                        inverse: true,
                        axisTick: {
                            show: false
                        },
                        axisLabel: {
                            textStyle: {
                                color: function (param, index) {
                                    // if (index <= 2) {
                                    //     const color = [
                                    //         '#F15B5A',
                                    //         '#EEC146',
                                    //         '#F7B935'
                                    //     ]
                                    //     return color[index]
                                    // } else {
                                    return '#fff'
                                    // }
                                }
                            },
                            show: true,
                            interval: 0,
                            align: 'left',
                            lineHeight: 32,
                            fontSize: 12
                        },
                        data: topName
                    },
                    {
                        type: 'category',
                        inverse: true,
                        axisTick: 'none',
                        axisLine: 'none',
                        show: true,
                        axisLabel: {
                            textStyle: {
                                color: '#fff',
                                fontSize: '12'
                            }
                        },
                        data: attackSourcesDataFmt(attaName)
                    },
                    {
                        type: 'category',
                        inverse: true,
                        axisLine: {
                            show: false
                        },
                        axisTick: {
                            show: false
                        },
                        axisPointer: {
                            label: {
                                show: false
                            }
                        },
                        pdaaing: [5, 0, 0, 0],
                        postion: 'right',
                        data: attaName,
                        axisLabel: {
                            show: false,
                            margin: 12 * fz,
                            align: 'left',
                            color: 'red',
                            rich: {
                                nt1: {
                                    color: '#000',
                                    backgroundColor: attackSourcesColor1[0],
                                    width: 13,
                                    height: 13,
                                    fontSize: 12,
                                    align: 'center',
                                    borderRadius: 26,
                                    lineHeight: '5',
                                    padding: [0, 1, 2, 1]
                                },
                                nt2: {
                                    color: '#fff',
                                    backgroundColor: attackSourcesColor1[1],
                                    width: 13,
                                    height: 13,
                                    fontSize: 12,
                                    align: 'center',
                                    borderRadius: 100,
                                    padding: [0, 1, 2, 1]
                                },
                                nt3: {
                                    color: '#fff',
                                    backgroundColor: attackSourcesColor1[2],
                                    width: 13,
                                    height: 13,
                                    fontSize: 12,
                                    align: 'center',
                                    borderRadius: 100,
                                    padding: [0, 1, 2, 1]
                                },
                                nt: {
                                    color: '#fff',
                                    backgroundColor: attackSourcesColor1[3],
                                    width: 13,
                                    height: 13,
                                    fontSize: 12,
                                    align: 'center',
                                    // lineHeight: 3,
                                    borderRadius: 100,
                                    padding: [0, 1, 2, 1],
                                    lineHeight: 5
                                }
                            },
                            formatter: function (value, index) {
                                index = contains(attaName, value) + 1
                                if (index - 1 < 3) {
                                    return ['{nt' + index + '|' + index + '}'].join('\n')
                                } else {
                                    return ['{nt|' + index + '}'].join('\n')
                                }
                            }
                        }
                    }

                ],
                series: [
                    {
                        zlevel: 1,
                        name: '',
                        type: 'bar',
                        barWidth: 6 * fz,
                        animationDuration: 1500,
                        data: attackSourcesDataFmt(attaData),
                        align: 'center',
                        itemStyle: {
                            normal: {
                                barBorderRadius: 26,
                            }
                        },
                        label: {
                            show: false,
                            fontSize: 12 * fz,
                            color: '#fff',
                        }
                    },
                    {
                        name: '',
                        type: 'bar',
                        barWidth: 6 * fz,
                        barGap: '-100%',
                        // margin: '20',
                        data: salvProMax,
                        textStyle: {
                            // 图例文字的样式
                            fontSize: 12,
                            color: '#fff'
                        },
                        itemStyle: {
                            normal: {
                                color: 'rgba(255,255,255,0.1)',
                                fontSize: 12,
                            }
                        }
                    }
                ]
            }


            myChart.setOption(option);

        };
    }

}